<!DOCTYPE html>

<meta charset="UTF-8">
<title>camera view</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
html, body, video { height: 100%; }
body { box-sizing: border-box; margin: 0; transition: padding .1s ease-out;}
video { display: block; width: 100%; max-width: 768px; margin: auto; object-fit: cover; }
@media (min-width: 768px) { body { padding: 1em; } }
</style>

<video autoplay playsinline disablepictureinpicture></video>

<!-- <script src="./adapter-8.1.1.min.js"></script> -->
<!--<script src="./jslib-html5-camera-photo.min.js"></script>-->
<script>
"use strict";!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("JslibHtml5CameraPhoto",[],t):"object"==typeof exports?exports.JslibHtml5CameraPhoto=t():e.JslibHtml5CameraPhoto=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t,n){"use strict";function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}n.d(t,"e",function(){return r}),n.d(t,"a",function(){return a}),n.d(t,"f",function(){return u}),n.d(t,"c",function(){return c}),n.d(t,"b",function(){return s}),n.d(t,"d",function(){return f});var o,r=["user","environment"],a={USER:"user",ENVIRONMENT:"environment"},u=["jpg","png"],c={PNG:"png",JPG:"jpg"},s=(o={},i(o,"jpg","image/jpeg"),i(o,"png","image/png"),o),f={audio:!1,video:!0}},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"FACING_MODES",function(){return s}),n.d(t,"IMAGE_TYPES",function(){return f});var o=n(2),r=n(4),a=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),u=o.a.IMAGE_TYPES.PNG,c=function(){function e(t){i(this,e),this.videoElement=t,this.stream=null,this.numberOfMaxResolutionTry=1,this.settings=null,this.inputVideoDeviceInfos=[],this.windowURL=o.a.getWindowURL(),this.mediaDevices=o.a.getNavigatorMediaDevices()}return a(e,[{key:"_getStreamDevice",value:function(e,t){var n=this;return new Promise(function(i,r){var a=o.a.getIdealConstraints(e,t);n.mediaDevices.getUserMedia(a).then(function(e){n._gotStream(e),n._getInputVideoDeviceInfosPromise().then(function(e){n.inputVideoDeviceInfos=e}).catch(function(){}).then(function(){i(e)})}).catch(function(e){r(e)})})}},{key:"_getStreamDeviceMaxResolution",value:function(e){var t=this,n=o.a.getMaxResolutionConstraints(e,this.numberOfMaxResolutionTry);if(null==n){var i={};return this._getStreamDevice(e,i)}return new Promise(function(i,o){t.mediaDevices.getUserMedia(n).then(function(e){t._gotStream(e),t._getInputVideoDeviceInfosPromise().then(function(e){t.inputVideoDeviceInfos=e}).catch(function(){}).then(function(){i(e)})}).catch(function(n){setTimeout(function(){t.numberOfMaxResolutionTry+=1,t._getStreamDeviceMaxResolution(e).catch(function(){o(n)})},20)})})}},{key:"_setVideoSrc",value:function(e){if("srcObject"in this.videoElement)this.videoElement.srcObject=e;else{var t=this.windowURL.createObjectURL(e);this.videoElement.src=t}}},{key:"_setSettings",value:function(e){this.settings=null;var t=e&&e.getTracks?e.getTracks():[];t.length>0&&t[0].getSettings&&(this.settings=t[0].getSettings())}},{key:"_getInputVideoDeviceInfosPromise",value:function(){var e=this;return new Promise(function(t,n){var i=[];e.mediaDevices.enumerateDevices().then(function(e){e.forEach(function(e){"videoinput"===e.kind&&i.push(e)}),t(i)}).catch(function(e){n(e)})})}},{key:"_gotStream",value:function(e){this.stream=e,this._setSettings(e),this._setVideoSrc(e)}},{key:"getCameraSettings",value:function(){return this.settings}},{key:"getInputVideoDeviceInfos",value:function(){return this.inputVideoDeviceInfos}},{key:"startCamera",value:function(e,t){var n=this;return this.stopCamera().then(function(){}).catch(function(){}).then(function(){return n._getStreamDevice(e,t)})}},{key:"startCameraMaxResolution",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return this.stopCamera().then(function(){}).catch(function(){}).then(function(){return e._getStreamDeviceMaxResolution(t)})}},{key:"getDataUri",value:function(e){var t={sizeFactor:void 0===e.sizeFactor?r.c:e.sizeFactor,imageType:void 0===e.imageType?u:e.imageType,imageCompression:void 0===e.imageCompression?r.a:e.imageCompression,isImageMirror:void 0===e.isImageMirror?r.b:e.isImageMirror};return o.a.getDataUri(this.videoElement,t)}},{key:"stopCamera",value:function(){var e=this;return new Promise(function(t,n){e.stream&&(e.stream.getTracks().forEach(function(e){e.stop()}),e.videoElement.src="",e.stream=null,e._setSettings(null),t()),n(Error("no stream to stop!"))})}}]),e}(),s=o.a.FACING_MODES,f=o.a.IMAGE_TYPES;t.default=c},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(3),r=n(0),a=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),u=function(){function e(){i(this,e)}return a(e,null,[{key:"getDataUri",value:function(e,t){var n=t.sizeFactor,i=t.imageType,r=t.imageCompression,a=t.isImageMirror,u=e.videoWidth,c=e.videoHeight,s=Object(o.b)(u,c,n),f=s.imageWidth,d=s.imageHeight,l=document.createElement("canvas");l.width=f,l.height=d;var g=l.getContext("2d");return a&&g.setTransform(-1,0,0,1,l.width,0),g.drawImage(e,0,0,f,d),Object(o.a)(l,i,r)}},{key:"getWindowURL",value:function(){return window.URL||window.webkitURL||window.mozURL||window.msURL}},{key:"getNavigatorMediaDevices",value:function(){var e=null,t=!(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia),n=!(!navigator.mozGetUserMedia&&!navigator.webkitGetUserMedia);if(t)e=navigator.mediaDevices;else if(n){var i=navigator.mozGetUserMedia||navigator.webkitGetUserMedia,o={getUserMedia:function(e){return new Promise(function(t,n){i.call(navigator,e,t,n)})}};e=Object.assign(i,o)}return e}},{key:"isSupportedFacingMode",value:function(){return e.getNavigatorMediaDevices().getSupportedConstraints().facingMode}},{key:"getIdealConstraints",value:function(e,t){var n={audio:!1,video:{}};if(Object(o.c)(e,t))return r.d;var i=navigator.mediaDevices.getSupportedConstraints();return i.width&&i.height&&i.facingMode?(e&&r.e.includes(e)&&(n.video.facingMode=e),t&&t.width&&(n.video.width=t.width),t&&t.height&&(n.video.height=t.height),n):(console.error("Constraint width height or facingMode not supported!"),r.d)}},{key:"getMaxResolutionConstraints",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments[1],i=e.getIdealConstraints(t),o=i.video.facingMode,r=[{width:{min:640},ideal:{facingMode:o}},{width:{min:800},ideal:{facingMode:o}},{width:{min:900},ideal:{facingMode:o}},{width:{min:1024},ideal:{facingMode:o}},{width:{min:1080},ideal:{facingMode:o}},{width:{min:1280},ideal:{facingMode:o}},{width:{min:1920},ideal:{facingMode:o}},{width:{min:2560},ideal:{facingMode:o}},{width:{min:3840},ideal:{facingMode:o}}];if(n>=r.length)return null;var a=r.slice(0,-n);return i.video.advanced=a,i}},{key:"FACING_MODES",get:function(){return r.a}},{key:"IMAGE_TYPES",get:function(){return r.c}}]),e}();t.a=u},function(e,t,n){"use strict";function i(e,t){if(!(t>=0&&t<=1))throw new Error(t+" is invalid imageCompression, choose between: [0, 1]");if(!s.f.includes(e))throw new Error(e+" is invalid imageType, choose between: "+s.f.join(", "));return!0}function o(e,t){var n={};try{i(e,t),n.imageType=e,n.imageCompression=t}catch(e){console.error(e),console.error("default value of "+s.c.PNG+" is used"),n.imageType=s.c.PNG,n.imageCompression=null}return n}function r(e,t,n){var i=e*parseFloat(n);return{imageWidth:i,imageHeight:t/(e/i)}}function a(e,t,n){return o(t,n).imageType===s.c.JPG?n?e.toDataURL(s.b[s.c.JPG],n):e.toDataURL(s.b[s.c.JPG]):e.toDataURL(s.b[t])}function u(e){if("object"===(void 0===e?"undefined":f(e)))for(var t in e)if(e.hasOwnProperty(t))return!1;return!0}function c(e,t){return!(e||t&&!u(t))}t.b=r,t.a=a,t.c=c;var s=n(0),f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e}},function(e,t,n){"use strict";n.d(t,"c",function(){return i}),n.d(t,"a",function(){return o}),n.d(t,"b",function(){return r});var i=1,o=null,r=!1}])});
</script>

<script>
"use strict";

// debug
const debug = false;
const _ = function () {};
const log = debug ? console.log : _;
const err = debug ? console.error : _;

// objects
const libCam = JslibHtml5CameraPhoto;
const video = document.querySelector("video");
const cameraPhoto = new libCam.default(video);

// constants
const camera_FacingMode = libCam.FACING_MODES.ENVIRONMENT;
const dataUri_Config = {
	sizeFactor: 1,                     // 图像缩放，1 原图，按比例缩放
	imageType: libCam.IMAGE_TYPES.JPG, // 图像类型
	imageCompression: .75,             // 压缩程度，0 最糊，1 最清晰
};

// functions

if (typeof cameraViewInitialized      !== "function") var cameraViewInitialized = _;
if (typeof cameraViewInitializedError !== "function") var cameraViewInitializedError = _;

var _isInitSuccessful = false;
function isInitSuccessful(){return _isInitSuccessful;}
var _isInitError = false;
function isInitError(){return _isInitError;}

// 使用默认分辨率开启摄像头
function startCameraDefaultResolution() {
	cameraPhoto.startCamera(camera_FacingMode).then(
		function () {
			log(cameraPhoto.getCameraSettings());
			log(cameraPhoto.getInputVideoDeviceInfos());
			cameraViewInitialized();
			_isInitSuccessful = true;
		}
	).catch(
		function (error) {
			err('Camera not started!', error);
			cameraViewInitializedError();
			_isInitError = true;
		}
	);
}

// 停止
function stopCamera() {
	cameraPhoto.stopCamera().then(
		function () { log('Camera stoped!'); }
	).catch(
		function (error) { log('No camera to stop!:', error); }
	);
}

// 拍照
function takePhoto() { return cameraPhoto.getDataUri(dataUri_Config); }

startCameraDefaultResolution();

</script>

